import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Column } from '@ant-design/plots';

const DemoColumn = () => {
  const data = [
    {
      "discipline_eval_turn": "第四轮学科评估",
      "discipline_eval_result": "A",
      "count": 1
    },
    {
      "discipline_eval_turn": "第四轮学科评估",
      "discipline_eval_result": "A-",
      "count": 2
    },
    {
      "discipline_eval_turn": "第四轮学科评估",
      "discipline_eval_result": "B+",
      "count": 4
    },
    {
      "discipline_eval_turn": "第四轮学科评估",
      "discipline_eval_result": "B",
      "count": 5
    },
    {
      "discipline_eval_turn": "第四轮学科评估",
      "discipline_eval_result": "B-",
      "count": 9
    },
    {
      "discipline_eval_turn": "第五轮学科评估",
      "discipline_eval_result": "A",
      "count": 1
    },
    {
      "discipline_eval_turn": "第五轮学科评估",
      "discipline_eval_result": "A-",
      "count": 3
    },
    {
      "discipline_eval_turn": "第五轮学科评估",
      "discipline_eval_result": "B+",
      "count": 5
    },
    {
      "discipline_eval_turn": "第五轮学科评估",
      "discipline_eval_result": "B",
      "count": 6
    },
    {
      "discipline_eval_turn": "第五轮学科评估",
      "discipline_eval_result": "B-",
      "count": 10
    }
  ];
  const config = {
    data,
    isGroup: true,
    xField: 'discipline_eval_turn',
    yField: 'count',
    seriesField: 'discipline_eval_result',
    height: 400,
    /** 设置颜色 */
    // color: ['#a8ddb5', '#a8ddb5', '#a8ddb5', '#a8ddb5', '#a8ddb5']
    // color: ['#30FFF4', '#4BB3EB', '#406EFA', '#5035E6', '#FFB30D'],

    /** 设置间距 */
    // marginRatio: 0.1,
    label: {
      // 可手动配置 label 数据标签位置
      position: 'middle',
      // 'top', 'middle', 'bottom'
      // 可配置附加的布局方法
      layout: [
        // 柱形图数据标签位置自动调整
        {
          type: 'interval-adjust-position',
        }, // 数据标签防遮挡
        {
          type: 'interval-hide-overlap',
        }, // 数据标签文颜色自动调整
        {
          type: 'adjust-color',
        },
      ],
    },
    yAxis: {
      label: {
        style: {
          fontSize: 18
        }
      }
    },
    xAxis: {
      label: {
        style: {
          fontSize: 18
        }
      }
    },
    legend: {
      itemName: {style: {fontSize: 18}},
    }
  };
  return <Column {...config} />;
};

export default DemoColumn
